<script setup lang="ts">
import { ref } from 'vue'
import { RouterView, useRouter } from 'vue-router'
// hooks
import { useUserInfo } from '@hooks/user'
import { onMounted } from 'vue'

// stores
import { useGlobalStore } from '@stores'
const globalStore = useGlobalStore()
const userStore = globalStore.userStore
const chatStore = globalStore.chatStore

const router = useRouter()
// 生命周期
onMounted(() => {
  displayUrlParams()
})

// 解析url
const displayUrlParams = () => {
  const urlParams = new URLSearchParams(window.location.search)
  if (urlParams.size) {
    const token = urlParams.get('token') as string
    // 判断token有没有
    if (!token) return
    useUserInfo(token)
  }
}

// 导入菜单列表图片
import dialogueImg from '@img/menu/dialogue.png'
import interviewImg from '@img/menu/interview.png'
import programmerImg from '@img/menu/programmer.png'
import { useChat } from './hooks/useChat'

const menuList = ref([
  { id: 1, image: dialogueImg, text: '智能对话', path: '/chat' },
  { id: 2, image: interviewImg, text: '模拟面试', path: '/interview' },
  { id: 3, image: programmerImg, text: '程序员', path: '/programmer' }
])
let menuId = ref(1)
// 点击菜单
const handleClick = async (item: (typeof menuList.value)[number]) => {
  menuId.value = item.id
  if (item.id == 1 || item.id == 2) {
    useChat(item.id)
    return
  }
  router.push({
    path: item.path
  })
}
// 登录后显示
const loginListInterface = ref(false)
// 退出登录
const logout = () => {
  userStore.outLogin()
  loginListInterface.value = false
}
// 跳转到账号设置
const goUserConfig = () => {
  router.push({
    path: '/user-config'
  })
  loginListInterface.value = false
}
</script>

<template>
  <div class="container">
    <!-- 左边 -->
    <div class="container-left">
      <!-- 菜单头部 -->
      <div class="menu-header">
        <div class="menu-logo">
          <img src="@img/menu/logo.png" alt="" />
        </div>
        <div class="menu-ai">
          <img src="@img/menu/AI.png" alt="" />
        </div>
      </div>
      <!-- 菜单列表 -->
      <div class="menu-list">
        <div
          class="menu-item"
          :class="{ active: menuId == item.id }"
          v-for="item in menuList"
          :key="item.id"
          @click="handleClick(item)"
        >
          <img :src="item.image" alt="" />
          <p>{{ item.text }}</p>
        </div>
      </div>
      <div class="menu-footer">
        <div class="menu-privacy">
          <img src="@img/menu/privacy.png" alt="" />
          <p>隐私策略</p>
        </div>
        <div
          class="menu-login"
          @click="loginListInterface = !loginListInterface"
          v-if="userStore.loginState"
        >
          <img :src="userStore.userInfo.logo" alt="" />
          <p>{{ userStore.userInfo.nickName }}</p>
        </div>
        <div class="menu-login" @click="$showLoginDialog" v-else>
          <img src="@img/menu/login.png" alt="" />
          <p>登录</p>
        </div>

        <div class="login-list" v-show="loginListInterface">
          <div class="settings" @click="goUserConfig">
            <img src="@img/menu/settings.png" alt="" />
            <p>账号设置</p>
          </div>
          <div class="logout" @click="logout">
            <img src="@img/menu/exit.png" alt="" />
            <p>退出登录</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="container-right">
      <RouterView />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@assets/css/style.scss';
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  overflow: hidden;

  // 左边
  &-left {
    width: 176px;
    background-color: #fff;
    padding: 27px 0 30px 0;
    position: relative;
    z-index: 99;
    display: flex;
    flex-direction: column;

    @include screen-change(1440px) {
      width: 132px;
      padding-top: 20px;
      padding-bottom: 30px;
    }
    @include screen-change(1280px) {
      width: 117px;
      padding-top: 18px;
      padding-bottom: 20px;
    }

    // 菜单头部
    .menu-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      cursor: pointer;
      .menu-logo {
        margin-bottom: 10px;
        @include screen-change(1280px) {
          margin-bottom: 7px;
        }
        img {
          width: 56px;
          height: 56px;
          @include screen-change(1280px) {
            width: 37px;
            height: 37px;
          }
        }
      }
      .menu-ai {
        img {
          width: 82px;
          height: 34px;
          @include screen-change(1280px) {
            width: 55px;
            height: 23px;
          }
        }
      }
    }
    // 菜单列表
    .menu-list {
      flex: 1;
      margin-top: 43px;
      display: flex;
      flex-direction: column;
      overflow: auto;
      @include screen-change(1280px) {
        margin-top: 29px;
      }

      .menu-item {
        display: flex;
        align-items: center;
        width: 158px;
        height: 55px;
        cursor: pointer;
        margin-bottom: 7px;
        @include screen-change(1440px) {
          width: 119px;
          height: 41px;
        }
        @include screen-change(1280px) {
          width: 106px;
          height: 37px;
        }
        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          margin-left: 26px;
          @include screen-change(1280px) {
            width: 11px;
            height: 11px;
            margin-right: 7px;
            margin-left: 17px;
          }
        }
        p {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-size: 18px;
          color: #333334;
          @include screen-change(1440px) {
            font-size: 14px;
          }
          @include screen-change(1280px) {
            font-size: 12px;
          }
        }
      }
      .active {
        background: #f2f2f2;
        border-radius: 28px;
        @include screen-change(1280px) {
          border-radius: 19px;
        }
      }
    }
    // 菜单尾部
    .menu-footer {
      // height: 75px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .menu-privacy,
      .menu-login {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .menu-privacy {
        img {
          width: 12px;
          height: 12px;
          @include screen-change(1280px) {
            width: 8px;
            height: 9px;
          }
        }
        p {
          color: #d80f0f;
          margin-left: 10px;
          font-size: 16px;
          @include screen-change(1280px) {
            font-size: 11px;

            margin-left: 7px;
          }
        }
      }
      .menu-login {
        background: #c90000;
        border-radius: 28px;
        width: 159px;
        height: 55px;
        margin-top: 20px;

        @include screen-change(1280px) {
          border-radius: 19px 19px 19px 19px;
          width: 106px;
          height: 37px;
          margin-top: 10px;
        }
        img {
          width: 20px;
          height: 20px;
          @include screen-change(1280px) {
            width: 13px;
            height: 13px;
          }
        }
        p {
          color: #fff;
          margin-left: 10px;
          @include screen-change(1280px) {
            font-size: 12px;
            margin-left: 7px;
          }
        }
      }
      .login-list {
        position: absolute;
        right: -100%;
        bottom: 0;
        width: 113px;
        height: 68px;
        background: #c90000;
        box-shadow: 0px 1 4px 1px rgba(255, 28, 28, 0.1608);
        border-radius: 7px 7px 7px 7px;
        img {
          width: 12px;
          height: 12px;
          margin-right: 5px;
        }

        p {
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          text-align: center;
        }
        .settings {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-bottom: 0.1vw solid #ffffff;
          box-sizing: border-box;
          justify-content: center;
        }

        .logout {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
  // 右边
  &-right {
    flex: 1;
    display: flex;
  }
}
</style>
